<template>
  <div>
    <h1>TODOLIST</h1>
    <Todos :arr="arr">
      <template slot-scope="{ row, index }">
        <pre :style="{ background: row.done ? 'green' : 'red' }">
                  {{ index }}---{{ row.title }}
               </pre
        >
      </template>
    </Todos>
    <hr />
  </div>
</template>

<script>
import Todos from "./components/Todos.vue";
export default {
  name: "",
  components: {
    Todos,
  },
  data() {
    return {
      arr: [
        { id: 1, title: "吃饭", done: false },
        { id: 2, title: "睡觉", done: false },
        { id: 3, title: "打豆豆", done: true },
      ],
    };
  },
};
</script>

<style scoped>
</style>
